<!--
  - Copyright (c) 2021.  北京维数科技有限公司
  - Date :  2021/3/25
  - Author ：F12 Console=> atob("MzMxNDkxODAwQHFxLmNvbQ==")
  - Version ：1.0.0
  -->

<template>
  <div class="app-container calendar-list-container no-padding">
    <el-container>
      <div class="flex-left-pannel flex-left-pannel__noright">
        <el-row>
          <div class="xf-tabletop-handles">
            <div class="xf-tabhd-left">
              <el-button class="filter-item" @click="handleCreate" type="primary" size="mini">添加设施</el-button>
              <el-button type="text" @click="importFn">导入表格</el-button>
              <el-button type="text" @click="download">下载表格模版</el-button>
            </div>
            <div class="xf-tabhd-right">
              状态
              <el-select v-model="listQuery.status" filterable placeholder="请选择" style="margin-right: 10px;" size="mini">
                <el-option label="全部" value=""></el-option>
                <el-option label="正常" value="0"></el-option>
                <el-option label="维修中" value="1"></el-option>
              </el-select>
              <el-button @click="tableQuery" type="primary" size="mini">查询</el-button>
              <el-popover
                placement="bottom-end"
                width="700"
                class="xf-custom-poper"
                @show="getSelected"
                v-model="visible2">
                <div class="xf-double-form">
                  <div class="xf-dbform-item">
                    <div class="xf-dbform-item__sleft">
                      <p class="xf-dbform-item__label">设施编号</p>
                      <el-input v-model="slistQuery.facilitiesNo" placeholder="请输入设施编号"></el-input>
                    </div>
                    <div class="xf-dbform-item__sright">
                      <p class="xf-dbform-item__label">设施类型</p>
                      <el-select placeholder="请选择设施类型" v-model="slistQuery.equipmentType">
                        <el-option label="全部" value=""></el-option>
                        <el-option :label="item" :value="item" v-for="item in equipmentTypeList" :key="item"></el-option>
                      </el-select>
                    </div>
                  </div>
                  <div class="xf-dbform-item">
                    <div class="xf-dbform-item__sleft">
                      <p class="xf-dbform-item__label">位置描述</p>
                      <el-input v-model="slistQuery.positionDescription" placeholder="请输入位置描述"></el-input>
                    </div>
                    <div class="xf-dbform-item__sright">
                      <p class="xf-dbform-item__label">位置标记</p>
                      <el-select placeholder="请选择位置标记" v-model="slistQuery.positionSign">
                        <el-option label="全部" value="-1"></el-option>
                        <el-option label="已标记" value="1"></el-option>
                        <el-option label="未标记" value="0"></el-option>
                      </el-select>
                    </div>
                  </div>
                  <div class="xf-dbform-item">
                    <div class="xf-dbform-item__sleft">
                      <p class="xf-dbform-item__label">联网单位</p>
                      <el-select placeholder="请选择联网单位" v-model="slistQuery.oid">
                        <el-option label="全部" value=""></el-option>
                        <el-option :label="item.oname" :value="item.id" v-for="item in oNameList" :key="item.id"></el-option>
                      </el-select>
                    </div>
                    <div class="xf-dbform-item__sright">
                      <p class="xf-dbform-item__label">最近巡检日期</p>
                      <el-date-picker
                        v-model="slistQuery.dateStrs"
                        value-format="yyyy-MM-dd"
                        type="date"
                        placeholder="选择巡检日期"
                        style="width:320px;">
                      </el-date-picker>
                    </div>
                  </div>
                </div>
                <div style="text-align: left; margin: 0; margin-top:20px;">
                  <el-button size="mini" type="primary" @click="pointerQuery">查询</el-button>
                  <el-button type="text" @click="visible2 = false">取消</el-button>
                </div>
                <el-button slot="reference" type="text" size="mini">高级查询</el-button>
              </el-popover>
            </div>
          </div>
        </el-row>
        <el-table
          key='tableKey'
          :data="list"
          ref="multipleTable"
          v-loading.body="listLoading" fit style="width: 100%"
          @selection-change="handleSelectionChange">
          <el-table-column
            type="selection"
            width="55">
          </el-table-column>
          <el-table-column label="状态">
            <template slot-scope="scope">
              <span>{{scope.row.state}}</span>
            </template>
          </el-table-column>
          <el-table-column label="设施编号">
            <template slot-scope="scope">
              <span>{{scope.row.facilitiesNo}}</span>
            </template>
          </el-table-column>
          <el-table-column label="设施类型">
            <template slot-scope="scope">
              <span>{{scope.row.equipmentType}}</span>
            </template>
          </el-table-column>
          <el-table-column label="位置描述">
            <template slot-scope="scope">
              <span>{{scope.row.positionDescription}}</span>
            </template>
          </el-table-column>
          <el-table-column label="位置标记">
            <template slot-scope="scope">
              <span>{{scope.row.positionSign}}</span>
            </template>
          </el-table-column>
          <el-table-column label="联网单位">
            <template slot-scope="scope">
              <span>{{scope.row.oName}}</span>
            </template>
          </el-table-column>
          <el-table-column label="最近巡检日期">
            <template slot-scope="scope">
              <span>{{scope.row.lastInspectionTime}}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="130" fixed="right">
            <template slot-scope="scope">
              <span @click="handleUpdate(scope.row)" class="comm-table-btn"><icon-svg icon-class="bianji" style="fill:#50E3C2" /></span>
              <span @click="downloadImg(scope.row.facilitiesNo)" title="下载二维码" class="comm-table-btn"><icon-svg icon-class="qrcode" style="fill:#50E3C2" /></span>
              <span @click="createDel(scope.row)" class="comm-table-btn"><icon-svg icon-class="shanchu" style="fill:#50E3C2" /></span>
            </template>
          </el-table-column>
        </el-table>
        <div v-show="!listLoading" class="sensor-pagination-container">
          <div>
            <el-checkbox v-model="isselall" :indeterminate="isIndeterminate" @change="handleCheckAllChange" v-show="list&&list.length!=0">全选</el-checkbox>
            <el-button type="text" style="margin-left: 10px;" @click="delAllSensor" v-show="list&&list.length!=0" :disabled="checklist&&checklist.length==0">全部删除</el-button>
          </div>
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="listQuery.page" :page-sizes="[10,15,30, 50]" :page-size="listQuery.limit" layout="total, sizes, prev, pager, next, jumper" :total="total"> </el-pagination>
        </div>
      </div>
    </el-container>
    <slider-panel :Show.sync="dialogFormVisible" custom-class="out-side-frame">
      <div class="form-content-frame">
        <el-form :model="failityForm" ref="addfailityForm" :rules="rules" label-width="100px" label-position='top' @submit.native.prevent>
          <el-form-item label="设施类型" prop="facilitiesTypeId">
            <el-select v-model="failityForm.facilitiesTypeId" placeholder="请选择设施类型" style="width: 100%">
              <el-option :label="item.equipmentType" :value="item.id" v-for="(item,index) in equipmentAddTypeList" :key="index"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="位置标记" prop="isgeographicalPositionSign">
            <el-input v-model="failityForm.isgeographicalPositionSign" placeholder="未标记" class="xf-input-withbtn" :disabled="true">
              <el-button slot="append" class="xf-input-withbtn__rightbtn" @click="handleSelectMap">
                <icon-svg icon-class="checklocal" style="fill:rgba(255, 255, 255, 0.7)" />标记地点</el-button>
            </el-input>
          </el-form-item>
            <el-form-item label="联网单位" prop="oid">
                <el-select v-model="failityForm.oid" placeholder="请选择联网单位" style="width: 100%">
                    <el-option :label="item.oname" :value="item.id" v-for="item in oNameList" :key="item.id"></el-option>
                </el-select>
            </el-form-item>
          <el-form-item label="位置描述" prop="positionDescription">
            <el-input v-model.trim="failityForm.positionDescription"></el-input>
          </el-form-item>
            <el-button v-if="dialogStatus==='create'" type="primary" @click="create('addfailityForm')" size="mini" native-type="submit">确 定</el-button>
            <el-button v-else type="primary" @click="update('addfailityForm')" size="mini" native-type="submit">确 定</el-button>
            <el-button @click="cancel('addfailityForm')" type="text">取 消</el-button>
        </el-form>
      </div>
    </slider-panel>
    <el-dialog :visible.sync="dialogFormChildVisible" :show-close='false' top="7vh" custom-class="fulldialog-child" :close-on-click-modal='false' :close-on-press-escape='false'>
      <div class="dialog-custom__header" style="justify-content:flex-end;">
        <div class="dialog-custom__btns">
          <el-button type="primary" size="mini" @click="savelnglat">保存</el-button>
          <el-button type="text" @click="mapCancel">取消</el-button>
        </div>
      </div>
      <div class="dialog-map__container">
        <div class="dailogmap-top-search">
          <el-autocomplete
            v-model="searchText"
            :fetch-suggestions="onSearchResult"
            :trigger-on-focus="false"
            placeholder="请搜索或选择地点"
            @select="handleSelect"
            popper-class="dailog-addressbox-list"
            suffix-icon="el-icon-search"
          >
            <template slot-scope="{ item }">
              <span class="name">{{ item.name }}</span>
              <span class="addr">{{ item.district }}</span>
            </template>
          </el-autocomplete>
        </div>
        <el-amap vid="amap" ref="map" :rotateEnable='true' :plugin="plugin" :center="center" :zoom="zoom" :events="events" class="mapset" :resizeEnable="resized">
          <el-amap-marker :position="center" :events="markerEvents">
          </el-amap-marker>
          <el-amap-info-window :position="center" :content="lnglatstr" :visible="infowvisible" :events="infowevents"></el-amap-info-window>
        </el-amap>
      </div>
    </el-dialog>
    <el-dialog title="导入文件" :visible.sync="dialogImportVisible" :close-on-click-modal="false" :show-close="false" width="400px" top="40vh" custom-class="upload-cum">
      <p class="uploadtitle">导入文件类型：xlsx 或 xls，大小不超过10M</p>
      <el-upload
        class="upload-wrap"
        :class="{filedisabled:uploadDisabled}"
        ref="upload"
        drag
        :headers="token"
        :action="uploadUrl"
        :data="uploadparams"
        :onSuccess="uploadSuccess"
        :on-progress="uploadOnProgress"
        :on-error="uploaderr"
        :beforeUpload="beforeUpload"
        :limit = 1
      >
        <el-button slot="trigger" class="uploadarea">+ 请选择或拖拽上传文件</el-button>
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelUpload" type="primary" v-show="!uploadLoading">知道了</el-button>
      </div>
    </el-dialog>
    <el-dialog title="删除设施" :visible.sync="dialogDeleteVisible" :show-close='false' custom-class="xf-jc-dialog" width="360px">
      <div class="xf-jc-deletect">
        <p>确定删除设施吗？</p>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="danger" size="mini" @click="deleteD()">删除</el-button>
        <el-button type="text" @click="dialogDeleteVisible = false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import {
    pageOuter,
    facilityType,
    facilityAddType,
    netWorkingUnit,
    addOuterObj,
    outerdoorEdit,
    outerdoorUpdate,
    outerdoorDel
  } from "@/api/device/facilityType/index";
  import {
    getToken
  } from '@/utils/auth';
  import sliderPanel from '@/components/SliderPanel'
  export default {
    name: "outdoor",
    components: {sliderPanel},
    data() {
      let self = this;
      return {
        uploadUrl:'/api/device/deviceOutdoorLabel/sensorImport',
        uploadparams:undefined,
        currentId:'',
        delsensorid:[],
        dialogImportVisible:false,
        uploadLoading:false,
        oNameList:[],
        uploadDisabled:false,//上传文件的显隐
        token:{'Authorization':getToken()},
        equipmentTypeList:[],
        equipmentAddTypeList:[],
        isselall:false,
        isIndeterminate:false,
        checklist:[],
        center: [114.305215, 30.59293],
        lnglatstr: "暂无数据",
        searchOption: {
          city: "武汉",
          citylimit: false
        },
        searchText:'',
        equipmentType:'',
        searchResult: [],
        lng: 0,
        lat: 0,
        zoom: 15,
        resized: true,
        infowvisible: true,
        markerEvents: {
          click: e => {
            self.infowvisible = true;
          }
        },
        infowevents: {
          close() {
            self.infowvisible = false;
          }
        },
        events: {
          init: o => {
            o.setMapStyle('amap://styles/117f36d1e643cfd46d21660d866df29e');
            AMapUI.loadUI(["control/BasicControl"], function(BasicControl) {
              //缩放控件
              o.addControl(
                new BasicControl.Zoom({
                  position: "rb" //右下角缩放
                })
              );
            });
          },
          click: e => {
            //点击地图事件
            // 这里通过高德 SDK 完成。
            let geocoder = new AMap.Geocoder({
              radius: 1000,
              extensions: "all"
            });
            self.center = [e.lnglat.lng, e.lnglat.lat];
            geocoder.getAddress(self.center, function(status, result) {
              if (status === 'complete' && result.info === 'OK') {
                if (result && result.regeocode) {
                  self.lnglatstr =result.regeocode.formattedAddress;

                }
              }
            });
            this.infowvisible = true;
          }
        },
        plugin: [
          {
            pName: "Geolocation",
            events: {
              init(o) {
                // o 是高德地图定位插件实例
                o.getCurrentPosition((status, result) => {
                  if (result && result.position) {
                    self.lnglatstr = result.formattedAddress;
                    self.lng = result.position.lng;
                    self.lat = result.position.lat;
                    self.center = [self.lng, self.lat];
                    self.$nextTick();
                  }
                });
              }
            }
          },
          {
            pName: "Scale",
            events: {}
          }
        ],
        visible2: false,
        failityForm: {
          facilitiesTypeId:'',
          isgeographicalPositionSign: "",
          positionDescription: "",
          oid:''
        },
        rules: {
          facilitiesTypeId: [
            {
              required: true,
              message: "请选择设施类型",
              trigger: "change"
            }
          ],
          oid: [
            {
              required: true,
              message: "请选择联网单位",
              trigger: "change"
            }
          ],
          isgeographicalPositionSign: [
            {
              required: true,
              message: "请选择位置",
              trigger: "change"
            }
          ],
          positionDescription: [
            {
              required: true,
              message: "请输入位置描述",
              trigger: "blur"
            },
            {
              min: 1,
              max: 50,
              message: "最多允许输入50个字符",
              trigger: "blur"
            }
          ]
        },
        list: null,
        total: null,
        listLoading: true,
        slistQuery: {
          facilitiesNo:'',
          dateStrs:'',
          equipmentType:'',
          oid:'',
          positionSign:'-1',
          positionDescription: ""
        },
        listQuery: {
          page: 1,
          limit: 15,
          status: ""
        },
        dialogFormVisible: false,
        dialogFormChildVisible: false,
        dialogDeleteVisible: false,
        dialogStatus: "",
        textMap: {
          update: "编辑设施",
          create: "添加设施"
        },
        tableKey: 0,
        editlnglat: "", //服务器保存的经纬度
        currentSelectObj: {}
      };
    },
    created() {
      this.getList();
    },
    methods: {
      mapCancel() {
        this.dialogFormChildVisible = false;
      },
      savelnglat() {
        this.dialogFormChildVisible = false;
        this.failityForm.isgeographicalPositionSign = '已标记';
        this.editlnglat = this.center.join(",") || "";
      },
      importFn() {
        this.uploadparams = {id:this.listQuery.ids,channelId:this.curChannelId,buildId:this.listQuery.ids};
        this.dialogImportVisible = true
      },
      handleSelectionChange(val){
        this.checklist=[...val];
        let length = this.total>this.list.length?this.list.length:this.total;
        if (val.length===length) {
          this.isselall=true;
          this.isIndeterminate=false;
        }else{
          this.isselall=false;
          this.isIndeterminate=true;
        }
        if (val.length===0) {
          this.isIndeterminate=false;
        }
      },
      delAllSensor(){
        this.delsensorid=[];
        this.checklist.forEach((item,index)=>{
          this.delsensorid.push(item.id);
        });
        this.dialogDeleteVisible=true;
      },
      handleCheckAllChange(){
        this.$refs.multipleTable.toggleAllSelection();
      },
      cancelUpload(){
        this.$refs.upload.clearFiles();
        this.dialogImportVisible = false;
        this.uploadLoading = false;
      },
      uploadOnProgress(e){
        let progress = Math.floor(e.percent);
        // 如果上传成功
        if (progress == '100' ) {
          this.uploadLoading = true;
        }
      },
      uploadSuccess (response, file, fileList) {
        // 上传成功的回调
        if (response.status=="200") {

          this.cancelUpload();
          this.$message({
            message: "导入成功！",
            type: 'success'
          });
          // 刷新列表
          this.getList();
          //  清空全选
          this.isselall = false;
          this.isIndeterminate = false;
        }else if(response.status ==="307"){
          // 文件格式错误
          this.cancelUpload();
          this.$message.error(response.message);
        }else{
          this.cancelUpload();
          this.$message.error(response.message);
          this.uploadLoading = false;
        }
      },
      uploaderr(err){
        this.cancelUpload();
        this.$message.error(JSON.parse(err.message).message);
        this.uploadLoading = false;
      },
      beforeUpload(file){
        var testmsg=file.name.substring(file.name.lastIndexOf('.')+1)
        const extension = testmsg === 'xls'
        const extension2 = testmsg === 'xlsx'
        const isLt2M = file.size / 1024 / 1024 < 10
        if(!extension && !extension2) {
          this.$message({
            message: '上传文件只能是 xls、xlsx格式!',
            type: 'warning'
          });
        }
        if(!isLt2M) {
          this.$message({
            message: '上传文件大小不能超过 10MB!',
            type: 'warning'
          });
        }
        return (extension || extension2) && isLt2M
      },
      handleSelect(item){

        let lnglat = item.location;

        this.searchText = item.name;

        let self = this;
        if(lnglat){
          this.center = [lnglat.lng, lnglat.lat];
        }else{
          let geocoder = new AMap.Geocoder({
            radius: 1000,
            extensions: "all",
          });
          geocoder.getLocation(item.name, function(status, result) {

            if (status === 'complete' && result.info === 'OK') {
              if (result && result.geocodes) {
                self.center = [result.geocodes[0].location.lng,result.geocodes[0].location.lat];
                self.zoom = 12.2
              }
            }
          });

        }

        this.lnglatstr = this.searchText;
        this.infowvisible = true;
      },
      onSearchResult(pois,cb) {
        let self = this;
        let searchkey = this.searchText;
        AMap.plugin(['AMap.Autocomplete'], function() {
          var autoOptions = {
            city: '', // 城市，默认全国
          }
          var autoComplete = new AMap.Autocomplete(autoOptions)
          autoComplete.search(searchkey, function(status, result) {
            // 搜索成功时，result即是对应的匹配数据
            if(result){
              let results = result.tips;
              if(results){
                cb(results);
              } else {
                //搜索无结果
                cb("")
              }
            }
          })
        })
      },
      handleSelectMap() {
        this.dialogFormChildVisible = true;

        if (this.editlnglat.length > 0) {

          let stringArr = JSON.parse(JSON.stringify(this.editlnglat)).split(",");
          let lng = Number(stringArr[0]);
          let lat = Number(stringArr[1]);
          this.center = [lng, lat];

          let self = this;
          let geocoder = new AMap.Geocoder({
            radius: 1000,
            extensions: "all"
          });
          geocoder.getAddress(self.center, function(status, result) {
            if (status === 'complete' && result.info === 'OK') {
              if (result && result.regeocode) {
                self.lnglatstr =result.regeocode.formattedAddress;

              }
            }
          });

        }
      },
      createDel(row){
        this.delsensorid=[];
        this.delsensorid.push(row.id);
        this.dialogDeleteVisible=true;
      },
      deleteD(){
        this.dialogDeleteVisible = false;
        outerdoorDel({id:(this.delsensorid).toString()}).then(() => {
          this.$notify({
            title: "成功",
            message: "删除成功",
            type: "success",
            duration: 2000
          });
          this.listQuery.page = 1;
          this.getList();
        });
      },
      tableQuery() {
        this.restPoinrterQuery();
        this.getList();
      },
      getSelected() {
        // 获取高级查询条件
        facilityType({channelId:this.curChannelId}).then(response => {
          this.equipmentTypeList = response.data;
        });
        netWorkingUnit({channelId:this.curChannelId}).then(res=>{
          this.oNameList = res;
        })
      },
      pointerQuery() {
        // 高级查询
        this.visible2 = false;
        this.listLoading = true;
        // 取消绑定并合并查询条件
        let contactKeys = Object.assign(
          JSON.parse(JSON.stringify(this.listQuery)),
          JSON.parse(JSON.stringify(this.slistQuery))
        );
        pageOuter(contactKeys).then(response => {
          this.list = response.data.rows;
          this.total = response.data.total;
          this.listLoading = false;
        });
      },
      handleCreate() {
        this.dialogStatus = "create";
        this.handlerest();
        netWorkingUnit({channelId:this.curChannelId}).then(res=>{
          this.oNameList = res;
        });
        //室外设施类型
        facilityAddType().then(res=>{
          this.equipmentAddTypeList = res.data;
        });
        this.dialogFormVisible = true;
      },
      restPoinrterQuery(){
        this.slistQuery.facilitiesNo = '';
        this.slistQuery.dateStrs = '';
        this.slistQuery.equipmentType = '全部';
        this.slistQuery.oid = '';
        this.slistQuery.positionSign= '-1';
        this.slistQuery.positionDescription =  "";
      },
      handlerest() {
        this.failityForm.isgeographicalPositionSign = "";
        this.failityForm.facilitiesTypeId = "";
        this.failityForm.oid = '';
        this.failityForm.positionDescription = "";
        this.editlnglat = "";
      },
      handleUpdate(row) {
        this.currentId = row.id;
        outerdoorEdit({ id: row.id,oid:row.oid })
          .then(res => {
            this.equipmentAddTypeList = res.data.deviceFacilitiesType;
            this.oNameList = res.data.DeviceNetworkingUnit;
            this.failityForm.facilitiesTypeId = res.data.deviceOutdoorLabel.facilitiesTypeId;
            this.failityForm.positionDescription = res.data.deviceOutdoorLabel.positionDescription;
            this.failityForm.oid = res.data.deviceOutdoorLabel.oid;
            if (res.data.deviceOutdoorLabel.positionSign) {
              this.failityForm.isgeographicalPositionSign = '已标记';
              this.editlnglat = res.data.deviceOutdoorLabel.positionSign;
            }else{
              this.failityForm.isgeographicalPositionSign = '';
              this.editlnglat = "";
            }
            this.dialogFormVisible = true;
            this.dialogStatus = "update";
          })
          .catch(function(error) {
            console.log(error);
          });
      },
      create(formName) {
        const set = this.$refs;
        set[formName].validate(valid => {
          if (valid) {
            this.failityForm.positionSign = this.editlnglat;
            addOuterObj(this.failityForm).then(() => {
              this.dialogFormVisible = false;
              this.handlerest();
              this.$refs[formName].resetFields();

              this.getList();
              this.$notify({
                title: "成功",
                message: "添加成功",
                type: "success",
                duration: 2000
              });
            });
          } else {
            return false;
          }
        });
      },
      update(formName) {
        const set = this.$refs;
        set[formName].validate(valid => {
          if (valid) {
            this.failityForm.positionSign = this.editlnglat;
            outerdoorUpdate(Object.assign({},{id:this.currentId},this.failityForm) )
              .then(() => {
                this.dialogFormVisible = false;

                this.$refs[formName].resetFields();
                this.handlerest();
                this.getList();
                this.$notify({
                  title: "成功",
                  message: "修改成功",
                  type: "success",
                  duration: 2000
                });
              })
              .catch(function(error) {
                console.log(error);
              });
          } else {
            return false;
          }
        });
      },
      cancel(formName) {
        this.dialogFormVisible = false;

        this.handlerest();
        this.$refs[formName].resetFields();
      },
      download() {
        window.open("http://file.tmc.turing.ac.cn/outdoorLabeiImport.xls")
      },
      downloadImg(imgpathCode){
        window.open('/api/device/qrcode/deviceNo?deviceNo='+imgpathCode)
      },
      handleSizeChange(val) {
        this.listQuery.limit = val;
        this.getList();
      },
      handleCurrentChange(val) {
        this.listQuery.page = val;
        this.getList();
      },
      getList() {
        this.listLoading = true;
        let contactKeys = Object.assign(
          JSON.parse(JSON.stringify(this.listQuery)),
          JSON.parse(JSON.stringify(this.slistQuery))
        );
        pageOuter(contactKeys).then(response => {
          this.list = response.data.rows;
          this.total = response.data.total;
          this.listLoading = false;
        });
      }
    },
    mounted() {

    },
  };
</script>
<style rel="stylesheet/scss" lang="scss">
  .flex-left-pannel__noright {
    padding-right: 0;
  }
  .xf-input-withbtn__rightbtn {
    border: 0;
    height: 34px;
    margin-top: -8px !important;
  }
  .device-add-dialog {
    .el-dialog__title {
      font-size: 32px;
    }
    .el-dialog__header {
      margin-top: 20px;
    }
    .custom-dialog-btn {
      position: absolute;
      font-size: 30px;
      left: 40px;
      top: 20px;
      color: #fff;
      &:hover {
        cursor: pointer;
      }
    }
    .dialog-footer {
      text-align: left;
    }
  }
  // 精准查询
  .xf-double-form{
    .xf-dbform-item{
      display: flex;
      justify-content: space-between;
      .xf-dbform-item__sleft{
        .el-input{
          width: 320px;
        }
      }
      .xf-dbform-item__sright{
        .el-input{
          width: 320px;
        }
      }
    }
  }
  .fulldialog-child {
    width: 1100px;
    .el-dialog__header {
      padding: 0;
    }
    .el-dialog__body {
      padding: 0;
    }
    .dialog-custom__header {
      display: flex;
      padding: 15px 20px;
      justify-content: space-between;
      .dialog-custom__header-title {
        font-size: 32px;
        line-height: 36px;
        color: #50E3C2;
      }
    }
    .dialog-map__container {
      width: 1100px;
      height: 750px;
      position: relative;
      overflow: hidden;
    }
    .amap-logo {
      display: none !important;
    }
    .amap-copyright {
      display: none !important;
    }
    .amap-ui-control-zoom {
      width: 35px;
      a {
        width: 35px;
      }
    }
    .amap-controls {
      .amap-geolocation-con {
        right: 0;
        right: 30px;
        left: auto !important;
        bottom: 106px !important;
        .amap-geo {
          right: 0;
          cursor: pointer;
        }
      }
    }
    .dailogmap-top-search{
      position: absolute;
      top: 20px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 9;
      width: 320px;
      .el-autocomplete{
        width: 100%;
      }
    }
    .amap-info {
      transform: translateY(-30px);
    }
  }
  // 搜索结果列表
  .dailog-addressbox-list{
    li{
      .addr{
        font-size: 12px;
        color: #999;
      }
    }
  }
  .device-add-dialog > div {
    width: 500px;
    margin: 0 auto;
  }
</style>
